<template>
  <div class="dialog-container">
    <el-dialog
      :title="title"
      width="90%"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <div>
        <div>
          <div>
            <div>
              <el-form :inline="true" label-width="100">
                <el-form-item label="因子名称或编码">
                  <el-input v-model="query.name" />
                </el-form-item>
                <el-button type="primary" @click="handleSelect">查询</el-button>
                <!-- <el-button type="primary" @click="handleReset">重置</el-button> -->
                <el-button type="primary" @click="handleUpdateAll">批量修改</el-button>
              </el-form>
            </div>
            <div>
              <el-table
                ref="multipleTable"
                v-loading="tableLoading"
                class="grid-data-table"
                height="calc(100vh - 400px)"
                :data="tableData"
              >
                <!-- <el-table-column prop="enterpriseId" label="所属企业" />
                <el-table-column prop="outletName" label="所属排放口" /> -->
                <el-table-column prop="oldNum" label="05编码">
                  <template slot-scope="scope">
                    {{ scope.row.oldNum || '---' }}
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="17编码">
                  <template slot-scope="scope">
                    {{ scope.row.num || '- - - - - -' }}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="measurementUnit" :formatter="getUnit" label="计量单位" />
                <el-table-column prop="measurementUnitRate" :formatter="getRates" label="计量单位倍率" />
                <el-table-column prop="countUnit" :formatter="getUnit2" label="累计单位" />
                <el-table-column prop="countUnitRate" :formatter="getRates2" label="累计单位倍率" />
                <el-table-column prop="digit" :formatter="getDigits" label="小数点位数" />
                <el-table-column prop="display" label="小数点位数" />
                <el-table-column label="显示/不显示">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.display"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-value="e042_01"
                      inactive-value="e042_02"
                      @change="handleUpdateStatus(scope.row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="lowerLimit" label="报警下限" />
                <el-table-column prop="upperLimit" label="报警上限" />
                <el-table-column prop="constantTime" label="恒值报警时限（分钟）" />
                <!-- <el-table-column prop="constantLimit" label="恒值" /> -->
                <el-table-column label="操作" fixed="right" width="100">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div>
                <Pagination
                  v-show="query.total>0"
                  :total="query.total"
                  :page.sync="query.page"
                  :limit.sync="query.limit"
                  @pagination="initData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <UpdateDialog
      :dialog-visible="updateDialogVisible"
      :obj="obj"
      @closeDialog="updateDialogVisible = false"
      @flushPage="flushPage"
    />
    <UpdateAllDialog
      :dialog-visible="updateAllDialogVisible"
      :outlet-id="query.outletId"
      @closeDialog="updateAllDialogVisible = false"
      @flushPage="flushPage"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getPage, edit } from '@/api/base/outletsFactor'
import UpdateDialog from './components/UpdateDialog'
import UpdateAllDialog from './components/UpdateAllDialog'
import { getSectionList } from '@/api/info/allInfo'
export default {
  name: 'Config',
  components: {
    Pagination, UpdateDialog, UpdateAllDialog
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      query: {
        total: 0,
        page: 1,
        limit: 10,
        name: null,
        outletId: null
      },
      title: '排口配置',
      tableData: [],
      tableLoading: false,
      updateDialogVisible: false,
      updateAllDialogVisible: false,
      batch: [],
      resetState: true,
      units: [],
      rates: [],
      digits: []
    }
  },
  created() {
    // this.initData()
  },
  methods: {
    initData() {
      this.getAllInfo()
      this.query.outletId = this.obj.id
      this.title = this.obj.outletName
      this.handleSelect()
    },
    // 重置条件
    handleReset() {
      this.query = {
        total: 0,
        page: 1,
        limit: 15,
        name: null,
        outletId: null
      }
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      getPage(query).then(res => {
        this.tableData = res.data.rows
        this.query.total = res.data.total
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
          // el-table加ref="multipleTable"
        })
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 刷新
    flushPage() {
      this.handleSelect()
    },
    // 批量修改
    handleUpdateAll() {
      this.updateAllDialogVisible = true
    },

    // 修改
    handleUpdate(row) {
      this.obj = row
      this.updateDialogVisible = true
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.updateDialogVisible = false
      this.updateAllDialogVisible = false
    },
    // 修改排放状态
    handleUpdateStatus(val) {
      const params = {
        id: val.id,
        display: val.display
      }
      val.display = val.display === 'e042_01' ? 'e042_02' : 'e042_01'
      const title = val.display === 'e042_01' ? '显示' : '不显示'
      this.$confirm('确定要' + title + '该因子吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        edit(params).then(() => {
          this.$message.success('修改成功')
          this.initData()
        }).catch(() => {
          this.$message.error('修改失败')
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    getAllInfo() {
      getSectionList(['e039_09', 'e039_10', 'e039_11']).then(res => {
        this.allInfo = res.data.list
        this.allInfo.forEach(item => {
          if (item.infoType === 'e039_09') {
            this.units.push(item)
          } else if (item.infoType === 'e039_10') {
            this.rates.push(item)
          } else if (item.infoType === 'e039_11') {
            this.digits.push(item)
          }
        })
      })
    },
    getUnit(row) {
      for (const i in this.units) {
        if (this.units[i].id === row.measurementUnit) {
          return this.units[i].name
        }
      }
    },
    getUnit2(row) {
      for (const i in this.units) {
        if (this.units[i].id === row.countUnit) {
          return this.units[i].name
        }
      }
    },
    getRates(row) {
      for (const i in this.rates) {
        if (this.rates[i].id === row.measurementUnitRate) {
          return this.rates[i].name
        }
      }
    },
    getRates2(row) {
      for (const i in this.rates) {
        if (this.rates[i].id === row.countUnitRate) {
          return this.rates[i].name
        }
      }
    },
    getDigits(row) {
      for (const i in this.digits) {
        if (this.digits[i].id === row.digit) {
          return this.digits[i].name
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
